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ABSTRACT 

A study of nine different image maps from World Wide 
Web home pages was conducted to evaluate their effectiveness in 
information display and access, relative to visual, navigational, and 
practical characteristics. Nine independent viewers completed 
20-question surveys on the image maps, in which they evaluated the 
characteristics of the maps on a 1-10 scale ascending from disagree 
to agree. When a viewer's purpose is to locate specific information, 
f unct ional i ty is the most important characteristic of effective image 
map design. Other factors that contribute to effective informational 
image maps include: simple graphics that load quickly, smaller image 
sizes, clearly designated "hot spots" or hyperlinks, unified rather 
than scattered grouping, icons that accurately represent information, 
design structure that models the structure of the information, 
limited number of layers and choices, and site-specific help options. 
When entertainment is the purpose of the image map, different design 
guidelines may be applicable. A web designer must consider the 
balance between artistic and functional demands. (Contains 16 
references.) (SWC) 
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Introduction 

The evolution of information delivery systems on the Internet into World Wide Web "browsers" like Netscape or Mosaic 
presents an exciting field for study in education as well as in business. Such tools are rapidly becoming a major interest 
to small and large business concerns (Ellsworth, 1995) and may soon impact the nature of education in profound ways 
(Perelman, 1992). Compared with text-based information system such as Gopher or Veronica, new graphical interface is 
one of the predominant features in the World-Wide Web. Everyday, hundreds of new graphics with new visual effects 
appear on the Web — a picture is worth a thousand words. However, Web designers should remember that a picture takes 
a thousand times more data than a word, which means it takes much longer to transfer, and often viewers are not patient 
enough to wait for the picture to load. This paper focuses on the image map, a key element in these new graphical 
interfaces, and the reactions of its viewers. Understanding the visual characteristics of die image map is critical to the 
design of effective information display and access tools. This study investigates nine different image maps selected from 
current home pages on the World Wide Web. These image maps were evaluated regarding their effectiveness by 
independent viewers and using criteria relating to visual literacy and hypermedia design. Research results are then 
relative to visual, navigational, and practical characteristics. 

World Wide Web 

As recently as the middle of 1993, the delivery of hypermedia modules over computer networks was problematic. A 
mechanism was needed that would standardize structural principles for the delivery of such modules and that would be 
"within the economic reach of ordinary users" (Howard, 1993). By the middle of 1994, exactly such a mechanism, the 
World Wide Web, had become available. Now, the full spectrum of communication tools is available electronically. 
Today many resources of hypermedia-integrated text, graphics, audio, animation, and video are accessible across the World 

Wide Web (WWW). . „ 

The WWW is the fastest growing information tool on the Internet (Descy, 1994). Along with the rich multimedia 
communications, graphical web browsers also provide a very high level of interaction. Users can quickly jump to new, 
related information using interactive linking tools like "buttons," "hot words," or "image maps." These hyperlinks can 
connect users to new information resources on their own campus, within their own towns, or around the world with the 
simple click of a mouse button (Dougherty & Koman, 1994). 

Image Maps 

Graphics may be used to capture a viewer's attention, to hold interest (Grabinger, 1993), to supplement and reinforce 
textual materials (Lucas, 1991) or to provide organizational overviews of complex data (Grabinger, 1993), (Koneman & 
Jonassen, 1994). Likewise, in web browsers, graphics may just add visual interest, mark a simple link to related 
information, or indicate organized multiple links to a complex information set. In the WWW, these links are called 
hyperlinks. 

A hyperlink is the connection between a word or graphic in an active browser view to another file anywhere on the World 
Wide Web (Hudak-David, 1994). A simple graphic hyperlink connects a single image to a single information resource 
(Figure 1). The image map (Figure 2) provides easy multiple choice access for web users. An image map connects a 
single, complex visual by multiple hyperlinks to a number of related information resources (Wiggins, 1994). A web 
browser recognizes when a user clicks a displayed "hot word" or "hot spot" and simply opens a connection to the pre- 
programmed uniform resource locator (URL - the Internet address of the desired resource). Currently, the image map is 
the most refined expression of this integration. 




F igure 1. Simple Graphic 
Links to Single Data Sets. 
(http://vinny.csd.mu.edu/ 
-howard/monet.html) 



Figure 2. Multiple Links 
From One Image Map to 
Several Data Sets. 
(http://home.netscape.com) 



Image Map Design Issues 
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Effective image maps require careful design with respect to visual and interactive aspects as they pertain to the users. 

User interface design for image maps touches on three broad areas: visual characteristics, navigational characteristics, and 
practical characteristics. 

Vis u al Characteristics 

Visually, as a graphic, an image map should be appealing. At the same time, it is important that an image map be 
easily recognized as a 'inking tool. There should be visual cues that tell users they are dealing with an image map. The 
visual content presented in an image map should also support a typical viewer's expectations relative to the information 
the graphic is supposed to represent (Lucas, 1991). For example, an image map for a university in Arizona would 
probably not be designed around an arctic theme. 

The individual graphics and related "hot spots" within an image map should represent the natures of the key 
informational segments. For instance, a book icon is a good representation for library services. Hot spots within an 
image map should be easy to recognize (Lucas, 1991; Jones, 1995). Often, a change in the mouse cursor will cue the 
presence of hot spots. In other cases, maps or similar structural features suggest the possibilities of hot spots. An 
image map should be artistic and visually appealing but not too busy or cluttered (Lucas, 1991 ; Jones, 1995; Grabinger, 

1993) . 

Navigational Characteristics 

Navigation is the act of recognizing and initiating a hyperlink to new information. Navigational aids should, if desired 
by the viewer, permit returning to the starting point in order to investigate other possibilities. Back tracking and book 
marking are additional navigational aids to help clarify the structure of multiple paths and provide quick repeated accesses 
to pertinent information (Desberg, 1994; Jones, 1995). Image maps should help users build mental models of the 
underlying structure and inter-relationships of information resources (Lucas, 1991). 

Navigational pit falls such as dead ends, endless choices, or links to non-existent resources should be avoided. Links to 
non-existent resources are troublesome given how frequently web pages change. Finally, "help" should be available on 
demand or when "non-hot-spot" areas of an image map are clicked (Desberg, 1994). 

Practical Characteristics 

Practical concerns consider the implementation or working characteristics of image maps. An image map graphic should 
not take too long to load (Desberg, 1994) and the special effects (image overlay, fades, fonts, extraneous visual 
information, colors, 3D, animations, video, backgrounds) should not clutter the display or frustrate the viewer (Desberg, 

1994) . It should be easy to tell what resources have been visited in the current session with the image map (Jones, 

1995) . A visual consistency (Grabinger, 1993) should tie the image map and its related information resources together, 
cueing the viewer that he or she has not branched off into unknown or unexpected territories (Lucas, 1991). The graphics 
and the related information resources should fit the target audience (Desberg, 1994). 



Methodology 

Development of Survey Questionnaire 

Since there is no previous research about image maps, this research represents a pilot study directed toward developing an 
evaluation procedure. Starting with guidelines from several computer-related product checklists in the literature (Lucas, 
1991; Desberg, 1994; Cates, 1992; Tolhurst, 1992), the authors developed a 20 question survey form addressing design 
issues based on visual, navigational, and practical characteristics. Two initial surveys, conducted as a pilot for formative 
evaluation, determined changes and clarifications needed in the questionnaire. Following the pilot, the scale of evaluation 
was changed from 1-4 (strongly disagree to strongly agree) to 1-10 (ten step scale from disagree to agree) in order to 
clarify and strengthen the differences in viewer opinions. 

Initially, questions were stated so that a high numeric response indicated strong agreement. However, some questions 
became awkward to read in this format. For example, one question stated "I was not frustrated by the image map." The 
authors were concerned the question could be confusing because of the non-typical negative structure so a few questions 
were re-phrased on the survey form. This sample question was re-written "I was frustrated by the image map." In this 
format, a response of 1 suggests a good image map. 

Of the twenty questions, eight questions covered visual characteristics. For example, the questions ask how easy the 
graphic is to recognize as an image map, how noticeable the hot spots are, or how appealing is the image map. The 
navigational aspects, using seven questions, ask how easy it is to move from page to page, how easy it is to return to 
the starting point, or if help is available. Five questions cover the practical concerns such as how long graphics take to 
load, how consistent the graphics are at a particular site, or if the image maps are frustrating. 
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Selection of WWW Sites 

The evaluation scope was limited to educational or institutional home pages on the WWW. The Net Directory option of 
the web browser Netscape 2.0 was the sampling source using the category of education. Two sites from each of 36 sub- 
categories of the educational area were randomly selected by the authors. While examining the 72 site options, the 
authors selected image maps that covered the spectrum from difficult to facilitative for typical users. Nine sites, (Figures 
3 through 1 1) representing visual, navigational, and practical image map characteristics, were selected for the final 
evaluation by independent viewers. 




Figure 3 . Discovery Channel 
(http://www.discovery.com/DCO/ 
doc/ 1 0 1 2/online.html) 




Figure 4 . Educom Image Map 
(http://www.educom.edu/) 




Figure 5. ExCite Image Map 
(http://oberon.educ . sfu.ca: 80/ 
newhome.html) 




Figure 7 . QuickTime 
(http://qtvr3.quicktime.apple.com/) 



Figure 6. Map of Monument and 
Museums of Paris 
(http://meteora.uscd.edu/~norman/ 
paris/Maps/MM) 




Figure 8. Texas A&M Campus Map 
(http://www.tamu.edu/test/map/map.cgi) 




Figure 9 . UCLA Image Map 
(http://www.ucla.edu/) 




Figure IQ . UWYO Image Map 
(http://www.uwyo.edu/) 
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Figure 11 . Virtual Tourist 
(http://wings.buffalo.edu/world) 

Independent V iew e rs 

Nine viewers were involved in this survey. Most of them were graduate students taking instructional technology classes. 
Others were volunteers. They individually came to a computer station connected to the Internet and spent about one hour 
evaluating the image maps. Addresses of the nine sites and the survey form were given to the viewers and they usually 
decided which sites to evaluate out of the nine possibilities. Viewers' activities were observed by the authors during their 
evaluation time. Only two viewers finished evaluating all nine sites within an hour while one individual spent an hour 
and a half. Most of them evaluated four or five sites within an hour. Those who finished all nine sites within an hour 
were already familiar with the World Wide Web and image maps. Most viewers were quite new to the WWW and spent 
the first ten to fifteen minutes exploring. Those who were unfamiliar with the WWW were given some advice while 
exploring the image maps. 



Results and Conclusions 

Fifty surveys were collected from nine viewers. Each site was evaluated four to seven times by different viewers. For 
analysis, every question item has the same value system: the higher the score, the more positive the map characteristic. 
The 20 survey items were grouped into three categories: visual, navigational, and practical. Because each category 
reflects a different number of questions and a different number of viewer evaluations, the total score of each category was 
divided by the number of questions times the number of viewers in order to give a comparable weight to each category. 
Figure 12 shows the analysis of the data. 




Figure 12 . Comparison of Average Viewer Ratings by Site: 
Overall, Visual, Navigational, and Practical. 



Overall Rankings 

Overall, the image maps of UCLA (Figure 9) and Educom (Figure 4) were selected as the best. In visual 
characteristics, UCLA and Educom also claim the top two rankings. From a navigational perspective, the Virtual 
Tourist (Figure 1 1), the Texas A&M campus map (Figure 8), and the Educom image map occupy the top three spots in a 
very close ranking. Finally, from a practical viewpoint, UW (Figure 10) has the highest ranking. The UW result is 
supported by an independent study of nearly 500 college web pages conducted at Columbia University, which also 



149 



6 





considered visual and practical characteristics (Johnson, et. al., 1995). Their -.tudy highly rated the UW web page for 
good presentation of general information. 

Visual Perspective 

There seems to be two conflicting elements at work in the visual analysis. Image maps can be very artistic and complex 
or rather simple. When viewers are looking for direction to information, they appear to prefer simple image maps. Even 
when viewers were asked how visually appealing a graphic was, they seemed to judge the degree of appeal by how easily 
they could get to information. If they could quickly locate hot spots in the image map and if the icons accurately 
represented the information, they seemed to prefer the graphic. The UCLA (Figure 9) and Educom (Figure 4) image 
maps, which ranked the highest, both use a simple and well-grouped layout. 

In Grabinger’s study (1993), simplicity is one of the important factors in computer screen design. Besides simplicity, 
Lucas (1991), in a study about effective computer-learner interfaces, states that grouping has a very strong influence on 
commanding and focusing viewer attention. As counter-examples, Quicktime (Figure 17), Excite (Figure 5), and 
Discovery (Figure 3) present more artistically interesting image maps. However, these three all violate the rales of 
simplicity and united grouping. For instance, the Quicktime image map scatters hot spots all around the graphic which 
de-focuses or scatters viewers' attention and results in the lowest visual ranking. The Discovery and Excite image maps 
appear to override marginal grouping with a too complex image. 

Navigational Perspective 

Navigation deals with the mechanics of moving through the available information. Regarding navigational aspects, the 
vir tua l Tourist (Figure 11), Texas A&M campus (Figure 8), and Educom (Figure 4) image maps were selected the best. 
These sites do not give the viewers many layers of choices. Thus, it is easy to link out in a single step and quickly 
return to the starting point The high ratings for the Virtual Tourist and Texas A&M image maps may also be a 
function of the physical nature of the information they represent Grabinger (1991) suggests that viewers prefer screens 
designed to closely reflect the content of the subject matter. 

Practical Perspective 

As to practical aspects, UW (Figure 10), Educom (Figure 4), and UCLA (Figure 9) ranked highest. Typically, these 
image maps are smaller and load quickly. Special effects arc minimal. Consistency is a strong characteristic of these 
image maps and their related information pages. The linking pages have visual cues such as icons or graphics very 
similar to the original image map. These maps were also highly rated in visual criteria, suggesting practical 
characteristics may be correlated with visual characteristics. Artistic images, such as the Discovery or QuickTime image 
maps (Figure 3, Figure 7), tend to be large, complex and slow to load. 

Discuss ion and Recommendations 

This initial study presents a number of factors that appear to be important to effective image map design when a viewer's 
purpose is to locate specific information. In this instance, functionality is the most important aspect. Simple graphics 
that load quickly and clearly designate hot spots appear to be preferred by the viewers in this study. Viewers, particularly 
novices, also wanted some site-specific help available when navigating web sites. Figure 13 presents the authors' 
recommendations as a "quick guide" for designing effective image maps for informational purposes. The Educom (Figure 
4) image map, which placed somewhere in the top three rankings in each category , is the best example of these 
recommendations. 

There may be different design guidelines when entertainment is the purpose of the image map. There is an interesting 
tension between artistic and functional aspects of image map design. A web designer must consider the balance between 
the purposes served by the maps and the intentions of the prospective viewers. From this research, viewers seeking 
information want functional, simple maps but viewers "surfing the web" may pass over such simple maps for the more 
artistic and entertaining images. The challenge to the image map designer is to find the balance between artistic needs to 
catch the viewer and functionality to allow the viewer to find information quickly. This balance issue presents 
opportunities for future research. 
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“QUICK Guide” 
for Functional Image Maps 

V Use simple graphics 

V Use smaller than larger image sizes 

V Clearly define hot spots 

V Use unified rather than scattered grouping 

V Choose icons to accurately represent information 

V Design image map to model the structure of information 

V Use a minimal number of layers 

V Limit the number of choices 

V Include site-specific help 



Figure 13 . Summary Design Guide for Functional Image Maps 
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